<template>
	<div class="home">
		<div class="div1">
			<img src="../../assets/img/pc/_.._logo_font20240412_uugai.com-5403812-17128840538238.png"/>
			<div class="search">
				<input type="search" v-model="keyword"/>
				<i class="el-icon-search" @click="search()"></i>
			</div>
			<div class="cart">
				<router-link to="/pc/cart"><i class="el-icon-shopping-cart-2"></i>购物车</router-link>
				<router-link to="/pc/myOrder">我的订单</router-link>
			</div>
		</div>
		<div class="div2">
			<h3>全部商品分类</h3>
			<span>热门推荐</span>
		</div>
		<div class="div3">
			<ul class="ul">
				<ul v-for="(item,i) in filer" :key="item.id">
					<li  v-for="(index,j) in item.list" :key="index.id">
						<p @click="find(index.id)">{{item.name}}/{{index.name}}</p>
					</li>
				</ul>
				
			</ul>
			<div class="div4" :class="isbool?'active1':'active'" >
				<template>
					  <el-carousel :interval="2000" arrow="always" >
						<el-carousel-item v-for="item in bannerlist" :key="item.id">
							  <img  :src="`${$ip}/api/public/showimg/${item.picture}`" />
						</el-carousel-item>
					  </el-carousel>
				</template>
			</div>
			<div class="hot">
			 <router-link :to="`/pc/bookDetail/${hotDate.id}`">
				<img  :src="`${$ip}/api/public/showimg/${hotDate.pic}`"/>
				</router-link>
				<span>{{hotDate.name}}</span>
				<p >￥{{hotDate.price}}</p>
			</div>
		</div>
		<div class="box">
			<ul >
				<li v-for="(item,i) in newlist" :key="item.id">
					<router-link :to="`/pc/bookDetail/${item.id}`">
						<img  :src="`${$ip}/api/public/showimg/${item.pic}`"/>
						<div>
							<h3>{{item.name}}</h3>
							<span style="color: red;">￥{{item.price.toFixed(2)}}</span>
						</div>	
					</router-link>
				</li>
				
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
		data() {
			return{
				isbool:true,
				newlist:[],
				keyword:'',
				bannerlist:[],
				types:[],
				hotDate:{},
			}
		},
		computed:{
			filer(){
				let m = this.types;
				let arr = [];
				for(let i=0; i<m.length; i++){
					let arr2 = [];
					for(let j=i; j<m.length; j++){
						if(m[i].id == m[j].pid){
							arr2.push(m[j]);
						}
						m[i].list = arr2;
					}
					arr.push(m[i]);
				}
				console.log(arr);
				return arr;
			}
		},
		methods:{
			hot(){
				this.newlist.sort((a1,a2)=>{
					return a2.salenum-a1.salenum;
				});
				console.log(this.newlist[0]);
				this.hotDate = this.newlist[0];
			},
			find(id){
				this.$router.push({
					path:'/pc/search',
					query:{typeid:id}
				})
			},
			search(){
				console.log("ppppppppp");
				this.$router.push({
					path:'/pc/search',
					query:{key:this.keyword}
				})
			}
		},
		mounted() {
			this.$get('/api/public/findHot/1/5').then((resp)=>{
				this.bannerlist = resp.data.data;
				console.log(this.bannerlist)
			})
			this.$get('/api/public/findPageBook/1/10/0').then((resp)=>{
				this.newlist = resp.data.data.books;
				this.hot();
				console.log(this.newlist)
			})
			this.$get('/api/public/type/findAll2').then((resp)=>{
				this.types = resp.data.data;
				console.log(resp.data);
			})
		}
	}
</script>

<style scoped>
	.home{
		width: 100%;
		/* overflow: hidden; */
	}
	.div1{
		width:1320PX;
		margin: 0px auto;
		display: flex;
		justify-content: space-between;
		
	}
	.div1 img{
		width: 300px;
		height: 200px;
	}
	.search input{
		border: 2px solid #727aa7;
		width: 500px;
		height: 45px;
		margin-top: 50px;
		outline: none;
	}
	.search i{
		background-color: #727aa7;
		width: 50px;
		height: 45px;
		float: right;
		margin-top: 50px;
		line-height: 45px;
		text-align: center;
		font-size: 30px;
		color: white;
	}
	.cart{
		width: 200px;
		height: 45px;
		border: 2px solid gainsboro;
		display: flex;
		margin-top: 50px;
	}
	.cart a{
		display: block;
		width: 100px;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	
	.cart a:first-child{
		color: white;
		background-color: #727aa7;
		font-size: 15px;
	}
	.cart a i{
		font-size: 25px;
	}
	.cart a:last-child{
		color: gray;
	}
	.cart a:first-child:hover{
		background-color: ghostwhite;
		color: #727aa7;
	}
	.cart a:last-child:hover{
		color: #727aa7;
	}
	.div2{
		width: 1320PX;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		border-bottom: 3px solid #727aa7;
	}
	.div2 span{
		display: block;
		width: 150px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #727aa7;
		color: white;
		font-weight: 900;
		border-top-left-radius: 8px;
	}
	.div2 h3{
		background-color: #727aa7;
		width: 300px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: white;
	}
	.div3{
		background-color: #727aa7;
		width: 1320PX;
		height: 300px;
		margin: 0 auto;
		display: flex;
	}
	.div3 ul{
		width: 300px;
		background-color: white;
		overflow-y: scroll;
		overflow-x: hidden;
		
	}
	.div3 ul::-webkit-scrollbar{
		display: none;
	}
	.div3 ul li{
		width: 99%;
		height: 30px;
		line-height: 30px;
		text-indent: 20px;
		margin-top: 10px;
	}
	.div3 ul li:hover{
		border: 2px solid #727aa7;
	}
	.div4{
		width: 700px;
		height: 100%;
	}
	.hot{
		text-align: center;
		width: 320px;
		height: 100%;
		background-color: white;
	}
	.hot img{
		display: block;
		margin: 20px auto;
		height: 60%;
		width: 50%;
	}
	.hot p{
		color: red;
		font-weight: 900;
		font-size: 20px;
	}
	.box{
		width: 1320px;
		margin: 20px auto;
		border-top: 5px solid #727aa7;
		border-bottom: 5px solid #727aa7;
	}
	.box ul {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
	.box ul li{
		width: 16%;
		height: 300px;
		margin: 30px 30px 30px 30px;
		margin-right: 20px;
		position: relative;
		border: 1px solid gray;
	}
	.box ul li img{
		width: 70%;
		height: 70%;
		padding-left: 15%;
		padding-top: 10%;
	}
	.box ul li div{
		width: 200px;
		height: 50px;
	}
	.box ul li h3{
		width: 200px;
		height: 25px;
		color: black;
		position: absolute;
		bottom: 10;
		line-height: 25px;
		text-align: center;
		flex-wrap: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
	}
	.box ul li div span{
		width: 200px;
		height: 25px;
		position: absolute;
		bottom: 1%;
		left: 10%;
		font-size: 15px;
	}
	.box ul li div button{
		position: absolute;
		left: 50%;
		bottom: 2%;
		height: 35px;
		width: 80px;
		background-color: coral;
		border:none;
		border-radius: 8px;
		color: white;
	}
	.box ul li:hover{
		/* border: 2px solid  #727aa7; */
		box-shadow: 0px 2px 5px 0px  #727aa7;
	}
	.el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	  .el-carousel img{
		  width: 100%;
		  height: 100%;
	  }
</style>
